<template>
  <div class="login-wrap">
    <div class="bg-box">
      <img src="./logo.png" class="logo" onclick="return false"/>
      <div class="title">蓝聘</div>
      <div class="tab-box">
        <div class="btn login1">登录</div>
        <div class="btn regist1" @click="showRegist">注册</div>
      </div>
    </div>

    <!--登录-->
    <div class="login-box">
      <div class="wrap-box">
        <div class="icon1"><img src="../../images/phone.png" class="phone1" onclick="return false"/></div>
        <div class="input-box"><input type="text" class="phone2" placeholder="请输入手机号码" maxlength="11" v-model="phone"
                                      v-on:input="checkIcon" @blur="inputBlur"/>
        </div>
        <div class="icon2" v-if="showIcon"><img src="../../images/icon_1.png" class="phone3" onclick="return false"/>
        </div>
        <div class="icon2" v-if="hideIcon"><img src="../../images/icon_2.png" class="phone3" onclick="return false"/>
        </div>
      </div>
      <div class="wrap-box distance">
        <div class="icon3"><img src="../../images/pwd.png" class="pwd1" onclick="return false"/></div>
        <div class="pwd-box"><input :type="pwdType" class="pwd2" placeholder="请输入6-16位密码" maxlength="16"
                                    v-model="password" @blur="inputBlur"/></div>
        <div class="icon4" @click="changeType"><img :src=pwdIcon class="pwd3" onclick="return false"/></div>
      </div>
      <div class="opt-box">
        <div class="select-box"><input type="checkbox" class="checkbox" :class="{'select-icon': choice}"
                                       @click="checkItem"/></div>
        <div class="remember">记住密码</div>
        <div class="forget" @click="forget">忘记密码</div>
      </div>
      <div class="line-box">
        <div class="line"></div>
        <div class="platform">第三方登录</div>
        <div class="line"></div>
      </div>
      <div class="wechat-box">
        <div class="wechat-con" @click="platForm">
          <img src="./wechat.png" class="wechat" onclick="return false"/>
        </div>
      </div>
      <div class="btn-box">
        <button type="button" class="login" @click="login">登录</button>
      </div>
    </div>

  </div>
</template>

<script>
  import md5 from 'js-md5'
  import {getUrlKey, setSessionStore, getSessionStore, setStore, getStore} from '../../common/js/util'
  import {baseUrl} from "../../common/js/env"
  import Cookies from 'js-cookie'


  export default {
    data() {
      return {
        choice: true,
        showIcon: false,
        hideIcon: false,
        phone: "",
        password: "",
        pwdType: "password",
        pwdIcon: require("../../images/icon_4.png"),
        identity: getUrlKey("identity"),
        withdraw: "",
        id: "",
        interviewId: "",
        showModal: false,
        checked: true,
        redirectType: ""
      }
    },
    mounted() {
      let phone = getStore("localPhone");
      let pwd = getStore("localPwd");
      let base64 = require('js-base64').Base64;
      if (pwd) {
        this.phone = phone;
        this.password = base64.decode(pwd);
      } else {
        this.phone = phone;
        this.password = "";
      }
      this.withdraw = base64.decode(getStore("withdraw_sign")); //判断不同的用户
      this.getIdentity();

      this.id = this.$route.query.id;//招工详情id
      this.interviewId = this.$route.query.interviewId;//推荐分享
      if (this.id) {
        setSessionStore("referralWorkId", this.id);
      }
      if (this.interviewId) {
        setSessionStore("referralInterviewId", this.interviewId);
      }
    },
    methods: {
      showRegist() {//注册
        if (this.id) {
          this.$router.push({path: "/regist", query: {"identity": this.identity, "id": this.id}});//招工分享注册账号
        } else if (this.interviewId) {
          this.$router.push({path: "/regist", query: {"identity": this.identity, "interviewId": this.interviewId}});//推荐分享注册账号
        } else {
          this.$router.push({path: "/regist", query: {"identity": this.identity}});
        }
      },
      checkItem() {
        this.choice = !this.choice;
      },
      checkIcon() {//手机号icon
        let phone = this.phone;
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(phone.trim())) {
          this.showIcon = false;
          this.hideIcon = true;
        } else {
          this.showIcon = true;
          this.hideIcon = false;
        }
      },
      changeType() {//密码icon
        this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
        this.pwdIcon = this.pwdIcon == require("../../images/icon_3.png") ? require("../../images/icon_4.png") : require("../../images/icon_3.png");
      },
      checkPwd(pwd) {//校验密码
        if (pwd == "") {
          this.$vux.toast.text("密码不能为空", "middle");
          return;
        } else if (pwd.indexOf(" ") >= 0) {
          this.$vux.toast.text("密码中不能有空格字符", "middle");
          return;
        } else if ((/[\u4e00-\u9fa5]+/).test(pwd)) {
          this.$vux.toast.text("密码不能包含中文", "middle");
          return;
        }
        return true;
      },
      checkPhone(phone) {//校验手机号码
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (phone == "") {
          this.$vux.toast.text("手机号码不能为空", "middle");
          return;
        }
        if (!reg.test(phone)) {
          this.$vux.toast.text("手机号码格式错误", "middle");
          return;
        }
        return true;
      },
      checkCode() {//校验验证码
        let reg = /^[0-9]*$/;
        let code = this.codeNum;
        if (code == "") {
          this.$vux.toast.text("验证码不能为空", "middle");
          return;
        } else if (!reg.test(code)) {
          this.$vux.toast.text("验证码格式不正确", "middle");
          return;
        }
        return true;
      },
      rememberPwd() {//记住密码
        let phone = this.phone;
        let pwd = this.password;
        if (this.choice) {
          let base64 = require('js-base64').Base64;
          setStore("localPhone", phone);
          setStore("localPwd", base64.encode(pwd));
        } else {
          localStorage.removeItem("localPwd");
        }
      },
      login() {//登录
        let phone = this.phone;
        let pwd = this.password;
        if (this.checkPhone(phone) && this.checkPwd(pwd)) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let data = {"phone": phone, "password": md5(pwd), "type": 0, "upIdentity": this.identity};
          this.axios.post(baseUrl + "/login/login", data).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.data == "null") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else if (resultObj.data == "error") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else {
              this.rememberPwd(); //回调记住密码
              let userCookie = document.cookie;
              let base64 = require('js-base64').Base64;
              setSessionStore("userCookie", userCookie);
              setSessionStore("user_sign", base64.encode(resultObj.data));
              setSessionStore("recruit_sign", 1);//分享链接-进招工详情标识
              setStore("withdraw_sign", base64.encode(resultObj.data));//验证不同用户登录后提现密码次数的问题

              if (resultObj.data != this.withdraw) { //不是当前用户清除十分钟次数和cookie的时间
                localStorage.removeItem("sess_time_local");
                Cookies.remove("sess_time_local", "", {
                  expires: -1,
                  path: ''
                })
              }

              if (getSessionStore("workdetail_sign") == "001155") {
                this.$router.push({path: '/recruitdetail', query: {id: this.id}});
              } else if (getSessionStore("cheer_sign") == "001188") {
                this.$router.push({path: '/referral', query: {interviewId: this.interviewId}});
              } else {
                this.$router.replace('/index');
              }
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      forget() {//忘记密码
        this.$router.push('/forget');
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      platForm() {//微信登录
        this.axios.get(baseUrl + "/wx_user/get_code").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            let redirect = resultObj.data;

            if (getSessionStore("workdetail_sign") == "001155") {//招聘详情
              this.redirectType = 1;
            } else if (getSessionStore("cheer_sign") == "001188") {//推荐分享
              this.redirectType = 2;
            } else {//我的
              this.redirectType = 3;
            }

            let redirectUrl = redirect.split("get_access_token")[0] + "get_access_token?type=" + this.redirectType + redirect.split("get_access_token")[1];
            window.location.href = redirectUrl;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });

      },
      getIdentity() {//获取identity
        if (this.identity != "" && this.identity != null && this.identity != undefined) {//若存在更新identity，不存在就取缓存
          setSessionStore("upIdentity", this.identity);
          this.identity = getSessionStore("upIdentity")
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .login-wrap
    wh(100%, 100%)
    overflow: hidden
    .bg-box
      display: flex
      flex-direction: column
      position: relative
      wh(100%, 4.72rem)
      bg-image("./bg.png", 100%, 100%)
      .logo
        margin: 0 auto
        padding-top: 1.267rem
        wh(1rem, 1rem)
      .title
        text-align: center
        margin-top: 0.133rem
        size-color(0.507rem, $color)
        font-weight: bold
      .tab-box
        display: flex
        position: absolute
        left: 0
        right: 0
        bottom: -0.373rem
        margin: auto
        width: 4.64rem
        .btn
          wh(2.667rem, 0.827rem)
          box-shadow: 0rem 1px 0.107rem 0rem #025C9B
          border-radius: 0.413rem
          font-size: 0.44rem
          text-align: center
          line-height: 0.827rem
        .login1
          z-index: 2
          left: 0
          color: rgba(255, 255, 255, 1)
          background: linear-gradient(-90deg, rgba(165, 130, 255, 1), rgba(60, 175, 255, 1))
        .regist1
          position: absolute
          z-index: 1
          right: 0
          color: $color
          background: rgba(255, 255, 255, 1)
        .login2
          z-index: 1
          left: 0
          color: $color
          background: rgba(255, 255, 255, 1)
        .regist2
          position: absolute
          z-index: 2
          right: 0
          color: rgba(255, 255, 255, 1)
          background: linear-gradient(-90deg, rgba(165, 130, 255, 1), rgba(60, 175, 255, 1))
    .login-box
      width: 100%
      margin-top: 0.8rem
      .wrap-box
        display: flex
        align-items: center
        wh(82.67%, 1.133rem)
        margin: 0 auto
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        margin-bottom: 0.547rem
        .icon1
          width: 0.787rem
          .phone1
            wh(0.413rem, 0.493rem)
        .icon3
          width: 0.787rem
          .pwd1
            wh(0.413rem, 0.493rem)
        .input-box
          width: auto
          .phone2
            wh(100%, 100%)
            size-color(0.4rem, rgba(169, 169, 169, 1))
        .pwd-box
          width: 6.947rem
          .pwd2
            wh(100%, 100%)
            size-color(0.4rem, rgba(169, 169, 169, 1))
        .icon2
          wh(0.533rem, 0.533rem)
          margin-left: auto
          .phone3
            wh(100%, 100%)
        .icon4
          wh(0.573rem, 0.413rem)
          margin-left: auto
          .pwd3
            wh(100%, 100%)
      .distance
        margin-bottom: 0.4rem
      .opt-box
        display: flex
        align-items: center
        margin: 0 auto
        margin-bottom: 1.64rem
        wh(82.67%, 0.32rem)
        font-size: 0.32rem
        .select-box
          wh(0.32rem, 0.32rem)
          margin-right: 0.08rem
          .checkbox
            wh(100%, 100%)
            outline: none
            background: rgba(60, 175, 255, 1)
            border-radius: 0.04rem
            -webkit-appearance: none
          .select-icon
            background: url("../../images/hock.png") no-repeat center rgba(60, 175, 255, 1)
            border-radius: 0.04rem
            background-size: 0.227rem 0.173rem
        .remember
          color: rgba(146, 146, 146, 1);
        .forget
          color: rgba(146, 146, 146, 1);
          margin-left: auto

      .line-box
        fj(center, center)
        margin-bottom: 0.333rem
        .line
          flex: 4
          wh(40%, 1px)
          background: rgba(230, 230, 230, 1)
        .platform
          flex: 2
          text-align: center
          margin-left: 2%
          margin-right: 2%
          size-color(0.333rem, rgba(146, 146, 146, 1))
      .wechat-box
        display: flex
        justify-content: center
        margin-bottom: 1.2rem
        .wechat-con
          wh(0.893rem, 0.733rem)
          .wechat
            wh(100%, 100%)
      .btn-box
        wh(100%, 1.333rem)
        text-align: center
        .login
          wh(82.67%, 100%)
          line-height: 1.333rem
          background: rgba(60, 175, 255, 1)
          border-radius(0.107rem)
          size-color(0.48rem, rgba(255, 255, 255, 1))

</style>
